﻿@model ProfileControllerModel.Index
<div class="my-main">
    <div class="ui-box  ui-box-alpha">
        <div class="ui-box-head">
           
                <div class="ui-box-head-title">
                    账户信息</div>
                <span class="ui-box-head-text">基本信息</span> <a href="#" class="ui-box-head-more">
                </a>
           
        </div>
        <div class="ui-box-container">
            <div class="ui-box-content">
                <div class="ui-tiptext-container ui-tiptext-container-message">
                    <p class="ui-tiptext ui-tiptext-message">
                        <i class="ui-tiptext-icon iconfont" title="提示"></i> 固定电话格式为：国家代码-区号-电话号码 如：086-010-12345678
                        或者为：区号-电话号码-分机号（分机号可不填）如：010-12345678-123。
                    </p>
                </div>
            </div>
        </div>
        <div class="ui-box-container-noborder">
            <div class="ui-box-content">
                <form id="form-userinfo" class="form-horizontal" method="post" action="/info">
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="nickname">
                        昵 称：</label>
                    <div class="col-lg-2">
                        <input type="text" id="nickname" name="nickname" class="form-control" placeholder="昵 称" value="@Model.User.Nickname" />
                    </div>
                    <div class="col-lg-2">
                        <p id="help-nickname" class="form-control-static muted">
                            必填</p>
                    </div>
                    <label class="col-lg-2 control-label" for="realname">
                        真实姓名：</label>
                    <div class="col-lg-2">
                        <input type="text" id="realname" name="realname" class="form-control" placeholder="真实姓名" value="@Model.User.Profile.Name" />
                    </div>
                    <div class="col-lg-2">
                        <p id="help-realname" class="form-control-static muted">
                            必填</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="phone">
                        固定电话：</label>
                    <div class="col-lg-2">
                        <input type="text" id="phone" name="phone" class="form-control" maxlength="20" placeholder="固定电话" value="@Model.User.Profile.Phone" />
                    </div>
                    <div class="col-lg-2">
                        <p id="help-phone" class="form-control-static muted">
                            可选</p>
                    </div>
                    <label class="col-lg-2 control-label" for="mobile">
                        移动电话：</label>
                    <div class="col-lg-2">
                        <input type="text" id="mobile" name="mobile" class="form-control" maxlength="11" placeholder="移动电话" value="@Model.User.Profile.Mobile" />
                    </div>
                    <div class="col-lg-2">
                        <p id="help-mobile" class="help-inline">
                            可选</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="birthday">
                        出生日期：</label>
                    <div class="col-lg-2">
                        <div class="input-group " data-date-language="zh-CN"  data-date-startDate="@(DateTime.Now.AddYears(-90).ToString("yyyy-MM-dd"))" data-date-endDate="@(DateTime.Now.AddYears(-12).ToString("yyyy-MM-dd"))" data-date-format="yyyy-mm-dd">
                            <input type="text" id="birthday" name="birthday" class="form-control" readonly="readonly"  placeholder="请选择日期" value="@Model.User.Profile.Birthday.ToString(string.Empty)" />
                            <span class="input-group-addon date"><i class="icon-th"></i></span>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <p class="form-control-static muted">
                        </p>
                    </div>
                    <label class="col-lg-2 control-label">
                        性 别：</label>
                    <div class="col-lg-2">
                        <div class="btn-group" data-toggle="buttons-radio">
                            @foreach (var o in UserProfile.UserGenderDic)
                            {
                                <button type="button" class="btn @(o.Key == Model.User.Profile.Gender ? "active" : string.Empty)" onclick="document.getElementById('gender').value=@((byte)o.Key);">@o.Value</button>
                            }
                        </div>
                        <input type="hidden" id="gender" name="gender" value="@((byte)Model.User.Profile.Gender)" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">
                        婚 姻：</label>
                    <div class="col-lg-4">
                        <div class="btn-group" data-toggle="buttons-radio">
                            @foreach (var o in UserProfile.MaritalStatusDic)
                            {
                                <button type="button" class="btn @(o.Key == Model.User.Profile.Marital ? "active" : string.Empty)" onclick="document.getElementById('marital').value=@((byte)o.Key);">@o.Value</button>
                            }
                        </div>
                        <input type="hidden" id="marital" name="marital" value="@((byte)Model.User.Profile.Marital)" />
                    </div>
                    <div class="col-lg-6">
                        <button class="ui-btn ui-btn-alpha" type="submit">
                            保 存</button>
                        <button type="reset" class="ui-btn ui-btn-beta">
                            取 消</button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section css{
    @Url.Ayatta().StaticCss("bootstrap.datepicker")
}
@section js{
    @Url.Ayatta().StaticJs("bootstrap.datepicker")
    @Url.Ayatta().StaticJs("bootstrap.datepicker.zh-CN")
    <script type="text/javascript">
        $(function () {
            $('.date').datepicker({ startView: 2 });
            $("#form-userinfo").validate({
                rules: { 'nickname': { required: true }, 'realname': { required: true }, 'phone': { phone: true }, 'mobile': { mobile: true} },
                messages: { 'nickname': { required: '请输入昵称！' }, realname: { required: '请输入真实姓名！' }, phone: { phone: '电话号码不正确！' }, 'mobile': { mobile: '手机号码不正确！'} },
                submitHandler: function (form) {
                    var param = $(form).serialize();
                    $.postJSON(form.action, param, function (result) {
                        if (result.Status == true) {

                        } else {
                            alert(result.Message);
                        }
                    });
                    return false;
                },
                errorPlacement: function (error, element) {
                    var id = "#help-" + $(element).attr('id');
                    $(id).html(error);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass(errorClass).addClass(validClass);
                    var id = "#help-" + $(element).attr('id');
                    $(id).html('');
                }
            });
        });
    </script>
}
